<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<link rel="shortcut icon" type="image/png" href="favicon.png" />
		<title>VCN Membership</title>
		<link href="layout.css" rel="stylesheet" type="text/css" />
		<link href="./css/jquery.jnotify.css" rel="stylesheet" type="text/css" />
		<script data-main='site.js' src='require-1.0.7.min.js'></script>
		<script src="/_utils/script/sha1.js"></script>
	</head>

	<body>
		<div id='main'></div>
			<div class='page' id='login'>
				<h3> Login </h3>
				<form>
					<table>
						<tr>
							<td class='label'> Username: </td>
							<td> <input type='text' id="user" value='testuser'/> </td>
						</tr>
						<tr>
							<td class='label'> Password: </td>
							<td> <input type='password' id="password" value='testpass'/> </td>
						</tr>
					</table>
					<input type='submit' value='Login' id='loginBtn'/>
				</form>
				<div class='success' style='display: none;'> 
					Logged in successfully, page will be redirected automatically.
				</div>
				<div class='failed' style='display: none;'>
					Incorrect credentials.
				</div>
			</div>
			<div class='page' id='search'>
				<div>
					<form action=''>
						<fieldset>
							<legend><h3>Search</h3></legend>
							<input type=text name='search_term'>
							<input type='submit' value='Search'>
							<input type='button' name='reset' value='Reset'>
							<br>
							<input type='radio' name='search_type' value='ind' checked='true'>
							<label>Individuals</label>
							<input type='radio' name='search_type' value='org'>
							<label>Groups</label>
						</fieldset>
					</form>
				</div>
				<div id='search_result'>
					<div>
						<h3>Search Result</h3>
						<div class='content'>
							<table class='results' style='width: 100%;'>
								<tbody>
									<tr style='text-align: left'>
										<th>Index</th>
										<th>Name</th>
										<th>Organization</th>
										<th>Address</th>
										<th>Phone</th>
									</tr>
								</tbody>
							</table>
							<hr>
						</div>
						<input type='button' name='view_donor' value='Choose Highlighted Donor'>
						<input type='button' name='add_donor' value='Add Donor'>
					</div>
				</div>
			</div>
			<div class='page' id='add_donor'>
				<h3>Add Donor</h3>
				<div id='tpl_donor_ind' class='tpld' >
					<div class="content"> </div>
					<div class="tpl addDonor" style='display: none;'>
						<form>
							<table>
								<tr class='org'> <td> <label>Organization Name</label></td> <td> <input type="text" name="org_name"/></td></tr>
								<tr class="ind"> <td> <label>First Name</label></td> <td> <input type="text" name="first_name"/></td></tr>
								<tr class="ind"> <td> <label>Last Name </label> </td> <td><input type="text" name="last_name"/></td></tr>
								<tr> <td> <label>Address </label></td> <td>  <input type="text" name="street_address"/></td></tr>
								<tr> <td> <label>Province </label> </td> <td><select class="Province"name="province"><option selected> British Columbia </option><option> Ontario </option><option> Quebec </option></select></td></tr>
								<tr> <td> <label>City </label> </td> <td><select class="City" name="city"><option selected> Vancouver </option><option> Ottawa </option><option> Montreal </option></select></td></tr>
								<tr> <td><label>Postal Code </label> </td> <td><input type="text" name="postal_code"/></td></tr>
								<tr class="ind"> <td> <label>Phone Home </label></td> <td>  <input type="text" name="tel_home"/></td></tr>
								<tr> <td> <label>Phone Work </label> </td> <td><input type="text" name="tel_work"/></td></tr>
								<tr> <td> <label>Phone Fax </label> </td> <td><input type="text" name="tel_fax"/></td></tr>
								<tr class='org'> <td> <label>Contact First Name</label></td> <td> <input type="text" name="first_name"/></td></tr>
								<tr class='org'> <td> <label>Contact Last Name </label> </td> <td><input type="text" name="last_name"/></td></tr>
								<tr class='org'> <td> <label>Contact Phone </label></td> <td>  <input type="text" name="tel_contact"/></td></tr>
								<tr> 
									<td>
										<input type='hidden' name='type' value='donor'/>
										<input class='org' type='hidden' name='org' value='true'/>
										<input type="submit">
									</td>
								</tr>
							</table>
						</form>
					</div>
				</div>
			</div>
			<div class='page' id='donor_detail'>
				<div id='detail'>
					<h3>Donor Detail</h3>
					<div class='content'></div>
					<div class='tpl'>
						<table>
						<tr class="org"> <td> <label>Organization Name</label>: </td> <td class='editable' name='org_name'><%= org_name %></td> </tr>
						<tr class="ind"> <td> <label>First Name</label>: </td> <td class='editable' name='first_name'><%= first_name %></td> </tr>
						<tr class="ind"> <td> <label>Last Name </label>:  </td> <td class='editable' name='last_name'><%= last_name %></td> </tr>
						<tr> <td> <label>Address </label>:  </td> <td class='editable' name='street_address'><%= street_address %></td> </tr>
						<tr> <td> <label>Province </label>:  </td> <td class='editable' name='province'><%= province %></td> </tr>
						<tr> <td> <label>City </label>:  </td> <td class='editable' name='city'><%= city %></td> </tr>
						<tr> <td> <label>Postal Code </label>:  </td> <td class='editable' name='postal_code'><%= postal_code %></td> </tr>
						<tr class="ind"> <td> <label>Phone Home </label>:  </td> <td class='editable' name='tel_home'><%= tel_home %></td> </tr>
						<tr class="org"> <td> <label>Phone Contact </label>:  </td> <td class='editable' name='tel_contact'><%= tel_contact %></td> </tr>
						<tr> <td> <label>Phone Work </label>: </td> <td class='editable' name='tel_work'><%= tel_work %></td> </tr>
						<tr> <td> <label>Phone Fax </label>:  </td> <td class='editable' name='tel_fax'><%= tel_fax %></td> </tr>
						<tr class="org"> <td> <label>Contact First Name</label>: </td> <td class='editable' name='first_name'><%= first_name %></td> </tr>
						<tr class="org"> <td> <label>Contact Last Name </label>:  </td> <td class='editable' name='last_name'><%= last_name %></td> </tr>
						</table>
					</div>
				</div>
				<div id='history'>
						<h3>Donation History</h3>
						<div class='records content'></div>
						<hr>
						<div id='donation_buttons' style='margin-top: 10px;'>
							<select class="ind add" >
							</select>
							<input type='button' name='add_donation' value='Add Donation'>
							<!--
							<input type='button' class="ind add" id='non-member' value='$14 and less'>
							<input type='button' class="ind add" id='low-income' value='$15 - $24'>
							<input type='button' class="ind add" id='personal' value='$25 - $39'>
							<input type='button' class="ind add" id='family' value='$40 and up'>
							<input type='button' class="org add" id='organization' value='Add Donation'>
							-->
						</div>
						

				</div>
			</div>
			<div class='page' id='add_donation' >
				<h3>Add Donation</h3>
				<form action=''>
					<table>
						<tbody>
							<tr>
								<td><b>Donation Date:</b></td>
								<td>
									<input type='text' name='donation_date' />
									<input type='button' value='Refesh' id='refresh'/>
									<input type='hidden' name='type' value='donation' />
									<input type='hidden' name='donor_id' />
									<input type='hidden' class='field ind all' name='donation_type' value='Donation' />
								</td>
							</tr>
							<tr>
								<td><b>Donation Amount:</b></td>
								<td> <input type='text' name='donation_amount'></td>
							</tr>
							<tr class='field org'>
								<td><b>Donation Type:</b></td>
								<td> <input type='text' name='donation_type' value='Donation'></td>
							</tr>
							<tr>
								<td><b>Login ID 1:</b></td>
								<td> <input type='text' name='login_id1'></td>
							</tr>
							<tr class='field ind family'>
								<td><b>Login ID 2:</b></td>
								<td> <input type='text' name='login_id2'></td>
							</tr>
							<tr class='field ind family'>
								<td><b>Login ID 3:</b></td>
								<td> <input type='text' name='login_id3'></td>
							</tr>
							<tr class='field ind family'>
								<td><b>Login ID 4:</b></td>
								<td> <input type='text' name='login_id4'></td>
							</tr>
							<tr>
								<td><b>Method:</b></td>
								<td>
									<input type='checkbox' name='cash' value='true'> Cash </input>
								</td>
							</tr>
							<tr>
								<td><b>Comments:</b></td>
								<td>
									<textarea style='height: 40px;' name='comment'></textarea>
								</td>
							</tr>
						</tbody>
					</table>
					<hr>
					<input type='button' value='Submit'>
					<input type='button' value='Empty'>
					<input type='button' value='Cancel'>
				</form>
			</div>
			<div class='page' id='donation_detail'>
				<h3>Donation Detail</h3>
				<div class="content"></div>
				<div class="tpl">
					<table>
						<tbody>
							<tr>
								<td><label> Donation Date: </label> </td>
								<td><%= donation_date %></td>
							</tr>
							<tr>
								<td><label> Donation Amount: </label> </td>
								<td><%= donation_amount %></td>
							</tr>
							<tr>
								<td><label> Donation Type: </label> </td>
								<td><%= donation_type %></td>
							</tr>
							<tr>
								<td><label> Cash: </label> </td>
								<td><%= cash_yn %></td>
							</tr>
							<tr>
								<td><label> Login ID 1: </label> </td>
								<td><%= login_id1 %></td>
							</tr>
							<tr>
								<td><label> Login ID 2: </label> </td>
								<td><%= login_id2 %></td>
							</tr>
							<tr>
								<td><label> Login ID 3: </label> </td>
								<td><%= login_id3 %></td>
							</tr>
							<tr>
								<td><label> Login ID 4: </label> </td>
								<td><%= login_id4 %></td>
							</tr>
							<tr>
								<td><label> Comment: </label> </td>
								<td><%= comment %></td>
							</tr>
						</tbody>
					</table>
				</div>
				<hr>
				<input type="button" name='view_receipt' value='View Receipt'>
				<input type="button" name='back_to_donor' value='Back to Donor Details'>	
			</div>
			<div class='page' id='view_receipt' >
				<div class='content'></div>
				<div class='tpl'>
					<div>
						<div style='float: right; display: table;'> 
							Receipt printed on <%= _date %>
						</div>
						<div >
							<h3> Vancouver Community Network Association </h3>
						</div>

					</div>
					<div style='display: table; position: relative; left: 50px;'> 
						411 Dunsmuir St.
						<br>
						Vancouver, B.C.
						<br>
						V6B 1X4
						<br>
						(604) 257-3811
					</div>

					<p>
						<b>* This receipt is NOT for tax deduction or credit purposes. *</b>
					</p>
					<hr>

					<table class='receipt'>
						<tbody>
							<tr>
								<td class='label front'>Received: </td>
								<td colspan ='3'> <%= received %> </td>
							</tr>
							<tr>
								<td class='label front'> From: </td>
								<td colspan = '3'> <%= street_address %> </td>
							</tr>
							<tr>
								<td></td>
								<td colspan = '3'><%= city %><%= province %></td>
							</tr>
							<tr>
								<td></td>
								<td colspan = '3'> <%= postal_code %> </td>
							</tr>
							<tr>
								<td class='label front'> For: </td>
								<td> <%= donation_type %> </td>
								<td class='label' style='width: 1px;'> Amount: </td>
								<td> $ <%= donation_amount %>.00</td>
							</tr>
						</tbody>
					</table>
					<hr>
					Payment Received on <%= _ndate %>
				</div>
			</div>
			<div class='page' id='test'>
				<ol id='results'></ol>
				<input type="button" name='test' value='Test'>
				<div id='content_place'></div>
				<div class='tpl' id='tpl_place'>
					<ul>
						<li>place: <%= city %></li>
						<li>verb : <%= country %></li>
					</ul>
				</div>
			</div>
	</body>
</html>
